<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-cascader</title>
	</head>
	<body>
		<div class="demo-main other-page">
			<div class="admim-title">
				<h2>Cascader 级联选择器</h2>
				<p>当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
					<p>有两种触发子菜单的方式</p>
				</div>
				<div class="content" id="cascader">
					<qx-cascader placeholder="请选择书籍" name="book" size="small"></qx-cascader>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>省市区三级联动</h3>
					<p>全国省市区联动选项</p>
				</div>
				<div class="content" id="city">
					<qx-cascader name="city" placeholder="请选择城市"></qx-cascader>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Cascader Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>options</td>
						<td>可选项数据源</td>
						<td>array</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>输入框占位文本</td>
						<td>string</td>
						<td>—</td>
						<td>请选择</td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸</td>
						<td>string</td>
						<td>medium / small / mini</td>
						<td>—</td>
					</tr>
					<tr>
						<td>name</td>
						<td>原生 name 属性</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
			<h2>Cascader Event</h2>
			<table>
				<thead>
					<tr>
						<td>事件名称</td>
						<td>说明</td>
						<td>回调参数</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>change</td>
						<td>当选中节点变化时触发</td>
						<td>选中节点的值</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script src="images/js/city.min.js"></script>
		<script>
			$(function () {
				// data
				var options = [
					{
						label: '指南',
						children: [
							{
								label: '设计原则',
								children: [
									{
										label: '一致'
									},
									{
										label: '反馈'
									},
									{
										label: '效率'
									},
									{
										label: '可控'
									}
								]
							},
							{
								label: '导航',
								children: [
									{
										label: '侧向导航'
									},
									{
										label: '顶部导航'
									}
								]
							}
						]
					},
					{
						label: '组件',
						children: [
							{
								label: 'Basic',
								children: [
									{
										label: 'Layout 布局'
									},
									{
										label: 'Color 色彩'
									},
									{
										label: 'Typography 字体'
									},
									{
										label: 'Icon 图标'
									},
									{
										label: 'Button 按钮'
									}
								]
							},
							{
								label: 'Form',
								children: [
									{
										label: 'Radio 单选框'
									},
									{
										label: 'Checkbox 多选框'
									},
									{
										label: 'Input 输入框'
									},
									{
										label: 'InputNumber 计数器'
									},
									{
										label: 'Select 选择器'
									},
									{
										label: 'Cascader 级联选择器'
									},
									{
										label: 'Switch 开关'
									},
									{
										label: 'Slider 滑块'
									},
									{
										label: 'TimePicker 时间选择器'
									},
									{
										label: 'DatePicker 日期选择器'
									},
									{
										label: 'DateTimePicker 日期时间选择器'
									},
									{
										label: 'Upload 上传'
									},
									{
										label: 'Rate 评分'
									},
									{
										label: 'Form 表单'
									}
								]
							},
							{
								label: 'Data',
								children: [
									{
										label: 'Table 表格'
									},
									{
										label: 'Tag 标签'
									},
									{
										label: 'Progress 进度条'
									},
									{
										label: 'Tree 树形控件'
									},
									{
										label: 'Pagination 分页'
									},
									{
										label: 'Badge 标记'
									}
								]
							},
							{
								label: 'Notice',
								children: [
									{
										label: 'Alert 警告'
									},
									{
										label: 'Loading 加载'
									},
									{
										label: 'Message 消息提示'
									},
									{
										label: 'MessageBox 弹框'
									},
									{
										label: 'Notification 通知'
									}
								]
							},
							{
								label: 'Navigation',
								children: [
									{
										label: 'NavMenu 导航菜单'
									},
									{
										label: 'Tabs 标签页'
									},
									{
										label: 'Breadcrumb 面包屑'
									},
									{
										label: 'Dropdown 下拉菜单'
									},
									{
										label: 'Steps 步骤条'
									}
								]
							},
							{
								label: 'Others',
								children: [
									{
										label: 'Dialog 对话框'
									},
									{
										label: 'Tooltip 文字提示'
									},
									{
										label: 'Popover 弹出框'
									},
									{
										label: 'Card 卡片'
									},
									{
										label: 'Carousel 走马灯'
									},
									{
										label: 'Collapse 折叠面板'
									}
								]
							}
						]
					},
					{
						label: '资源',
						children: [
							{
								label: 'Axure Components'
							},
							{
								label: 'Sketch Templates'
							},
							{
								label: '组件交互文档'
							}
						]
					}
				]

				$('#cascader').cascader({
					options: options,
					change: function (res) {
						console.log(res)
					}
				})
				$('#city').cascader({
					options: city, // 数据来源city.min.js
					change: function (res) {
						console.log(res)
					}
				})
			})
		</script>
	</body>
</html>
